<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        header {
            height: 44px;
            line-height: 44px;
            text-align: center;
            border-bottom: 1px solid #ccc;
        }

        footer {
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            border-top: 1px solid #ccc;
            height: 50px;

        }

        footer span {
            float: left;
            width: 25%;
            text-align: center;
            line-height: 50px;
        }

        .active {
            color: #f66;
        }
    </style>
</head>

<body>
    <div id='app'>
        <header>头部</header>


        <!-- 切换内容 -->
        <main>

            <!--
             <keep-alive 组件是用来缓存组件实例用的，但是不建议直接用，因为这样的话所有组件都会
             被缓存，导致缓存太大，所以要添加一些现在条件
             :include="['home','kind']" 设置包含，只有被包含的组件才会被缓存
             包含的组件是通过组件的 name 属性来设置的
             -->
            <!-- <keep-alive :include="['home','kind']">
                <component :is="comId"></component>
            </keep-alive> -->

            <!-- 
                exclude 排除，写在排除数组中的将不会被缓存
                max 配置最大缓存组件的数量
             -->
            <keep-alive :max="10" :exclude="['home','kind']">
                <component :is="comId"></component>
            </keep-alive>

        </main>

        <footer>
            <span :class="{active: comId == 'home'}" @click="comId = 'home'">首页</span>
            <span :class="{active: comId == 'kind'}" @click="comId = 'kind'">分类</span>
            <span :class="{active: comId == 'cart'}" @click="comId = 'cart'">购物车</span>
            <span :class="{active: comId == 'my'}" @click="comId = 'my'">我的</span>
        </footer>
    </div>
</body>
<script>

    const home = {
        name: 'home',
        template: '<h1>home</h1> <input /> '
    }
    const kind = {
        name: 'kind',
        template: '<h1>kind</h1> <input /> '
    }
    const cart = {
        template: '<h1>cart</h1> <input /> '
    }
    const my = {
        template: '<h1>my</h1> <input /> '
    }
    const app = {
        data() {
            return {
                comId: 'home'
            }
        },
        methods: {},
        components: {
            home,
            kind,
            cart,
            my
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>